<template>
    <div class="bg recommend">
        <transition-group>
            <div class="content" v-for="(item, index) in questions" @mouseenter="num = index" :key="item.question.id">
                <div class="close" v-show="num===index" @click="del(index)">
                    <el-tooltip class="item" effect="dark" content="不感兴趣 😐" placement="top">
                        <i class="el-icon-close"></i>
                    </el-tooltip>
                </div>
                <div class="look">
                    <img :src="item.icons[0].url">
                    <span>{{item.reason}}</span>
                </div>
                <div class="text">
                    <h2>
                        <a :href="item.question.url | filter('question')" target="_blank">{{item.question.title}}</a>
                    </h2>
                    <div class="recbtn">
                        <a class="write">
                            <i class="el-icon-edit"></i>
                            <span>写回答</span>
                        </a>
                        <div class="count">
                            <span>{{item.question.answer_count}} 回答 · </span>
                            <span>{{item.question.follower_count}} 关注</span>
                        </div>
                    </div>
                </div>
            </div>
        </transition-group>

    </div>
</template>

<script>
    export default {
        name: "hot",
        data () {
            return {
                questions: [],
                num: ''
            }
        },
        methods: {
            load () {
                this.$axios({
                    methods: 'get',
                    url: 'data/hot.json'
                })
                    .then(res => {
                        this.questions = res.data.data
                    })
                    .catch(err => {
                        console.log(err);
                    })
            },
            del (index) {
                this.questions.splice(index, 1)
            }
        },
        created() {
            this.load()
        },
        filters: {
            filter (val, str) {
                let pattern = 'api/v4/questions';
                return  val.replace(new RegExp(pattern), str);
            }
        }
    }
</script>

<style lang="scss" scoped>
@import "../../style/common";
@import "../../style/answer/recommend";
@include animate();
</style>